<!-- 首页 -->

<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<image src="https://www.aoc-ppns.cn/static/pa-img/title.png" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<!-- 功能导航 -->
		<view class="navList">
			<view class="navItem" style="background-color: #e47d5a;" @click="path('/plugins/diary/index')">健康日记</view>
			<view class="navItem" style="background-color: #71a7bf;"  @click="path('/plugins/screeningindex/index')">快速自查</view>
			<view class="navItem" style="background-color: #77be72;"  @click="path('/plugins/monitoringindex/index')">症状监测</view>
			<view class="navItem" style="background-color: #a171bd;"  @click="path('/plugins/selfevaluation/index')">自评量表</view>
		</view>
			
		<view class="listBox mt20">
			<view class="h76 flex flex-jcsb flex-aic mtb20">
				<view class="fwb"><image class="iconImg" src="../../static/images/Consultation.png" mode=""></image> 健康资讯</view>
				<view class="f30 c9" @click="path('/plugins/newList/newList?type=public')">查看更多 <text class="icon arrow"></text> </view>
			</view>
			<view class="listItem" v-for="(item,index) in list" :key="index" @click="path('/pages/rich/index?url='+ item.url+'&title='+item.title+'&img='+item.thumbnail_url)" >
				<view class="listImg">
					<image :src="item.thumbnail_url" mode=""></image>
				</view>
				<view class="listInfo">
					<view class="listName">{{item.title}}</view>
					<image  class="collection" @click.stop="collectionTap(item)" src="../../static/images/collection.png" mode=""></image>
				</view>
			</view>
		</view>
		<tabber :selected='0'></tabber>
	</view>

</template>

<script>
	import tabber from '../../components/tabber/index.vue'
	import  base64 from '../../core/base64-c.js'
	
	export default {
		data() {
			return {
				list:[]
			}
		},
		components:{
			tabber
		},
		onShow() {
			this.getNewsList();
			this.$utils.getTime(new Date(),'Y:M:D h:m:s');
		},
		methods: {
			// 获取文章列表
			getNewsList(){
				let _this = this;
				_this.$utils.request({
					url:"/patient/news/",
					data:{
						page_index:0,
						rows_per_page:5
					}
				}).then(res=>{
					console.log(res)
					res.data.news.forEach(item=>{
						item.title = base64.decode(item.title) 
					})
					_this.list = res.data.news;
					
				})
			},
			// 收藏文章
			collectionTap(item){
				let _this = this;
				if(!_this.$utils.isLogin()){
					return false;
				}
				_this.$utils.request({
					url:'/patient/bookmarks/',
					method:"POST",
					data:{
						thumbnail_url:item.thumbnail_url,
						title:item.title,
						url:item.url
					}
				}).then(res=>{
					uni.showToast({
						title:"收藏成功"
					})
				}).catch(err=>{
					uni.showToast({
						title:"已收藏过了",
						icon:"error"
					})
				})
			},
				
			
			// 跳转
			path(url){
				if(!this.$utils.isLogin()){
					return false;
				}
				this.$routeJump.navigateTo(url)
			}
		},
		onShareAppMessage() {}
	}
</script>

<style scoped lang="scss">
	.container{
		padding: 30rpx 30rpx  150rpx;
		.swiper{
			width: 100%;
			height: 320rpx;
			border-radius: 14rpx;
			overflow: hidden;
			
		}
		.navList{
			width: 100%;
			height: 300rpx;
			margin-top: 30rpx;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			grid-template-rows: repeat(2,1fr);
			grid-gap:20rpx;
			.navItem{
				line-height: 140rpx;
				background-color: #F1F1F1;
				border-radius: 14rpx;
				color: #fff;
				font-size: 36rpx;
				text-align: center;  
			}
		}
		.listBox{
			.iconImg{
				width: 50rpx;
				height: 50rpx;
				vertical-align: middle;
				margin-right: 10rpx;
			}
			.listItem{
				display: flex;
				margin-bottom: 20rpx;
				.listImg{
					width: 240rpx;
					height: 160rpx;
					border-radius: 14rpx;
					overflow: hidden;
					margin-right: 20rpx;
				}
				.listInfo{
					width: 430rpx;
					.listName{
						height: 100rpx;
						font-size: 32rpx;
						line-height: 54rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden
					}
					.collection{
						width: 46rpx;
						height: 46rpx;
						float: right;
					}
				}
				
			}
		}
	}
	
</style>
